<!-- 缺陷分类占比 -->
<template>
	<div id="big">
		<div id="r1">
			<span class="name1">筛选查询</span>
				<span class="name1">登记时间</span>
				<input class="name1" type="date" v-model="param.dateParam1"/><span class="name1">~</span><input class="name1" type="date" v-model="param.dateParam2"/>
				<input class="name1" type="button"  value="查询" @click="check()"/>
				<!-- <input class="name1" type="button" value="导出" /> -->
			</div>
			<div id="r2">
				<table  id="table">
					<tr>
						<td colspan="2">
							缺陷分类占比统计
						</td>
					</tr>
					<tr>
						<td >分类名称</td>
						<td >占比</td>
					</tr>
				<tr v-for="b in list1">
					<td>{{b.classifyDetail}}</td>
					<td>{{b.size}}</td>
				</tr>				
				</table>
			</div>
	</div>
</template>

<script>
	import $ from "jquery";
	export default {
		name:"Bugclassified",
		data(){
			return{
				list:[],
				list1:[],
				param:{
					name:"",
					dateParam1:"",
					dateParam2:"",
				},
			}						
		},
		methods:{
			check(){
				var _this=this;
				$.ajax({
					url:"http://localhost/bugDistribution/statistical",
					type:"post",
					data:_this.param,
					 headers: {"token": localStorage.getItem("token")},
					dataType:"json",
					success:function(data){
						_this.list1=data.list;					
					}										
				})
			},
		}
	}
	
</script>

<style scoped="scoped">
#big{
		width: 100%;
		height: 100%;
	}
	#r1{
		width: 85%;
		height: 50px;
		float: left;
		margin-top: 30px;
		background-color: #8B98AB;
		margin-left: 100px;
		border: #000000 0px solid;
		border-radius: 10px;
	}
	#r2{
		width: 85%;
		height: 600px;
		float: left;
		margin-top: 40px;
		background-color:#8B98AB;
		margin-left: 100px;
		border: #0000FF 0px solid;
		border-radius: 30px;
	}
	.name1{
		float: left;
		margin-left: 80px;
		text-align: center;
		margin-top: 15px;
		font-weight: bold;
		color: #000000;
	}
	#table{
		
		border: #000000 0px solid;
		float: left;
		width: 500px;
		background-color: #00B0E8;
		margin-top: 70px;
		margin-left: 400px;
		border-radius: 20px;
	}
	#table td{
		text-align: center;
		font-weight: bold;
		height: 50px;
	}
</style>
